<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="w-[480px] bg-white rounded-lg shadow-sm p-8">
      <div class="flex items-center mb-8">
        <div class="w-1 h-5 bg-blue-500 rounded-sm mr-2"></div>
        <h1 class="text-xl font-medium">修改密码</h1>
      </div>

      <form @submit.prevent="handleSubmit">
        <div class="space-y-6">
          <div class="relative">
            <label class="block mb-2">
              <span class="text-red-500 mr-1">*</span>
              <span class="text-gray-700">原密码：</span>
            </label>
            <el-input
                v-model="form.oldPassword"
                type="password"
                placeholder="输入原登录密码"
                :show-password="true"
                class="w-full"
            />
          </div>

          <div class="relative">
            <label class="block mb-2">
              <span class="text-red-500 mr-1">*</span>
              <span class="text-gray-700">新密码：</span>
            </label>
            <el-input
                v-model="form.newPassword"
                type="password"
                placeholder="输入新的登录密码"
                :show-password="true"
                class="w-full"
            />
          </div>

          <div class="relative">
            <label class="block mb-2">
              <span class="text-red-500 mr-1">*</span>
              <span class="text-gray-700">确认新密码：</span>
            </label>
            <el-input
                v-model="form.confirmPassword"
                type="password"
                placeholder="再次输入登录密码"
                :show-password="true"
                class="w-full"
            />
          </div>

          <el-button
              type="primary"
              class="w-full h-10 !rounded-button whitespace-nowrap"
              :loading="loading"
              @click="handleSubmit"
          >
            保存
          </el-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const loading = ref(false);
const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const handleSubmit = async () => {
  if (!form.value.oldPassword) {
    ElMessage.warning('请输入原密码');
    return;
  }
  if (!form.value.newPassword) {
    ElMessage.warning('请输入新密码');
    return;
  }
  if (!form.value.confirmPassword) {
    ElMessage.warning('请再次输入新密码');
    return;
  }
  if (form.value.newPassword !== form.value.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致');
    return;
  }

  loading.value = true;
  try {
    // 这里模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    ElMessage.success('密码修改成功');
    form.value = {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  } catch (error) {
    ElMessage.error('密码修改失败，请重试');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.el-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb;
}

.el-input :deep(.el-input__wrapper):hover {
  box-shadow: 0 0 0 1px #d1d5db;
}

.el-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff;
}
</style>

